<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
	 <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
		<title>用户管理</title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
		<link rel="stylesheet" th:href="@{/plugin/font-awesome/css/font-awesome.min.css}" media="all" />
		<link rel="stylesheet" th:href="@{/src/lvdong/origin/css/app.css}" media="all" />
		<link rel="stylesheet" th:href="@{/src/lvdong/origin/css/themes/default.css}" media="all" id="skin" kit-skin />
		<script th:src="@{/plugin/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
  		<script th:src="@{/plugin/jquery/jquery-3.4.1.js}" charset="utf-8"></script>
	</head>
	<body>
	<script>
		//根据获取的复选框数组对象删除对应用户以及关联表属性
		function deleteUsers(arr){
			var ids = new Array();
			$.each(arr,function(index,value){
				ids.push(this.user_id);
			});
			$.ajax({
				type:'get',
				url:'/userMg/deleteUsers?user_ids='+ids,//数组用路径传参
				dataType:'json',
				success:function(data){
					if(data!=null){
						layer.msg(data.msg);
					}else
						layer.msg('服务器接收错误');
				}
			});
		}
</script>
		<table id="demo" lay-filter="test" ></table>
		 
		<script>
		layui.use(['jquery', 'table', 'layer', 'form'], function(){
		  var table = layui.table;
		  table.render({
		    elem: '#demo'
		    ,id:'test'
		    ,LAY_CHECKED:false
		    ,align:'center'
// 		    ,height: 500
		    ,size:'lg'
			,even:true//开启隔行背景
			,skin:'line'//行边框风格
			,toolbar: '#toolbarDemo'
		    ,url: '/userMg/getAllUser.do' //数据接口
		    ,page: true//开启分页
		    ,skin:'row'//表格风格
			,title:'用户表'
				,parseData: function(res){ //res 即为原始返回的数据
				    return {
				      "code": res.code, //解析接口状态
				      "msg": res.msg, //解析提示文本
				      "data": res.data,//解析数据列表
				      "count":res.count//数据总数
				    };
				  }
		,response:{
				  statusName: 'code' ,// 对应 code
				  msgName: 'msg'  , // 对应 msg
				  statusCode:200,//默认成功状态码是0，
				  							//传回数据必须设置成功的状态码与其一致否则不会渲染
				  dataName: 'data',  // 对应 data
				  count:'count'
				}
			
		    ,cols: [
		    	[ //表头
		    	{type:'checkbox'}
			  ,{field: 'user_id', title: 'ID', width:100}
			  ,{field:  'username', title: '登录名', width:100}
			  ,{field: 'account', title: '真实姓名', width:100}
			  ,{field: 'department', title: '部门', width:100,templet:function(data){
				  if(data.department!=null){
					  return data.department.department_name;
				  }
			  }}
			  ,{field: 'roles', title: '角色', width:100,templet:function(data){
				  if(data.roles!=null){
					  var arr = new Array();
					  //遍历角色项，赋值给数组
					  for(var i=0;i<data.roles.length;i++){
						  arr[i] = data.roles[i].role_name;
					  }
					  return arr.join("、");
				  }
			  }}
		      ,{field: 'organization', title: '所在组织', width:100,templet:function(data){
		    	  if(data.organization!=null){
		    		  return data.organization.organization_name;
		    	  }
		      }}
			  ,{field: 'menus', title: '菜单管理', width:100,templet:function(data){
				  if(data.menus!=null){
					  var arr = new Array();
					  //遍历角色项，赋值给数组
					  for(var i=0;i<data.menus.length;i++){
						  arr[i] = data.menus[i].description;
					  }
					  return arr.join("、");
				  }
			  }}
			  ,{field: 'status', title: '账户状态', width:100,templet:function(data){
				  if(data.status!=null){
					  if(data.status==1)
						  return '可用';
					  else 
						  return '禁用';
				  }
			  }}
		    ]
		    	]
		    
		  });
		  
		  //监听事件
		  table.on('toolbar(test)', function(obj){
		    switch(obj.event){
		      case 'add':{
		    	  layer.open({
		    		   type: 2,
		    		   title: false,
		    		   shade: [0.5],
		    		   title: '添加用户',
		    		   shadeClose: true,
		    		   shade: 0.5,
		    		   skin:'demo-class',
		    		   maxmin: true, //开启最大化最小化按钮
		    		   area: ['700px', '500px'],
		    		   shift: 2,
		    		   //打开子页面
						content: '/addUser'
		    			,success: function(layero, index){
// 		    				 		 var iframe = window['layui-layer-iframe' + index];
							
		    		 				}
		    				  });
		    	  break;
		      }
		      case 'delete':{ 
		    	  	//获取复选框信息
			        var checkStatus = table.checkStatus('test');
			        //先判断是否空选
			        if(checkStatus<1){
			        	layer.msg("至少选择一个删除！");
			        	break;
			        }
			        deleteUsers(checkStatus.data);
				      break;
		      }
		      case 'update':{
		    	  var checkStatus = table.checkStatus('test'); //idTest 即为基础参数 id 对应的值
		    	  //先判断是否多选，多选则不予编辑
		    	  if(checkStatus.data.length>1){
			    	  layer.msg('编辑用户不能多选，请单选后再编辑！');
			    	  break;
		    	  }else if(checkStatus.data.length==0){
			    	  layer.msg('请选择一个需要编辑的用户！');
			    	  break;
		    	  }
		    	  //获取选中的数据
				//layui默认取得的是一个数组，每一行数据依次存放在数组[0]、[1]、[2]···
		    	  var data=checkStatus.data;
		    	  layer.open({
		    		   type: 2,
		    		   title: false,
		    		   shade: [0.5],
		    		   title: '编辑用户',
		    		   shadeClose: true,
		    		   shade: 0.5,
		    		   skin:'demo-class',
		    		   maxmin: true, //开启最大化最小化按钮
		    		   area: ['700px', '500px'],
		    		   shift: 2,
		    		   //打开子页面
						content: '/editUser'
		    			,success: function(layero, index){
		    				 		 var iframe = window['layui-layer-iframe' + index];
// 		    				 		 var body = layer.getChildFrame('body', index);//获取弹出层的dom元素
		    				 		 	//将该行数组存入
		    			                iframe.child(data);
		    		 				}
		    				  });
		   				   }
		  			  }
		 		});
		  
		});
		
		</script>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加用户</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除用户</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑用户</button>
  </div>
</script>
 
	</body>
</html>
